<!doctype html>
<html class="no-js" lang="zxx" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Sea-Man-Home</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <th:block th:insert="~{/fixed/header::head}"></th:block>


</head>
<body>
<!-- 预加载启动图标 -->
<div id="preloader-active">
    <div class="preloader d-flex align-items-center justify-content-center">
        <div class="preloader-inner position-relative">
            <div class="preloader-circle"></div>
            <div class="preloader-img pere-text">
                <img th:src="@{/assets/img/icon/loder.png}" alt="loder">
            </div>
        </div>
    </div>
</div>

<!--    头部导航条-->
<th:block th:insert="~{/fixed/headBar::headBar}"></th:block>

<main>
    <!-- 首页轮播图 开始 -->
    <section class="slider-area ">
        <div class="slider-active">

            <!-- 首页轮播图1 -->
            <div class="single-slider slider-bg1 slider-height d-flex align-items-center">
                <div class="container">
                    <div class="rowr">
                        <div class="col-xxl-5 col-xl-6 col-lg-7 col-md-8  col-sm-10">
                            <div class="hero-caption text-center">
                                <span>Sea Man House</span>
                                <h1 data-animation="bounceIn" data-delay="0.2s">海男之家！</h1>
                                <p data-animation="fadeInUp" data-delay="0.4s">一年逛两次海男之家， 每次都有新选择！</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 首页轮播图2 -->
            <div class="single-slider slider-bg2 slider-height d-flex align-items-center">
                <div class="container">
                    <div class="row justify-content-end">
                        <div class="col-xxl-5 col-xl-6 col-lg-7 col-md-8 col-sm-10">
                            <div class="hero-caption text-center">
                                <span>Sea Man House</span>
                                <h1 data-animation="bounceIn" data-delay="0.2s">海男之家！</h1>
                                <p data-animation="fadeInUp" data-delay="0.4s">一年逛两次海男之家， 每次都有新选择！</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- 首页轮播图 结束 -->

    <!-- 推荐轮播图 开始 -->
    <div class="latest-items section-padding fix" e>
        <div class="container">
            <div class="row justify-content-between">
                <div class="col-xl-12">
                    <div class="nav-button">
                        <!-- 推荐轮播按钮 开始  -->
                        <nav>
                            <div class="nav-tittle">
                                <h2>推荐商品</h2>
                            </div>
                        </nav>
                        <!--分类 轮播 按钮 结束  -->
                    </div>
                </div>
            </div>
        </div>
        <div class="container">
            <!-- 推荐轮播图 -->
            <div class="tab-content" id="nav-tabContent">
                <div class="tab-pane fade show active" id="nav-one" role="tabpanel" aria-labelledby="nav-one-tab">
                    <!-- 分类 1 -->
                    <div class="latest-items-active">
                        <!-- 开始 -->
                        <div class="properties pb-30" th:each="goods:${goodsAll}">
                            <div class="properties-card">
                                <div class="properties-img" style="width: 300px;height: 336px;">
                                    <a th:href="@{proDetails(gid=${goods.getGid()})}">
                                        <img th:src="'http://localhost:8888' + ${goods.getGoodsImg()}">
                                    </a>
                                    <div class="socal_icon">
                                        <a th:href="@{proDetails(gid=${goods.getGid()})}"><i class="ti-shopping-cart"></i></a>
                                        <a th:href="'http://localhost:8888' + ${goods.getGoodsImg()}" class="img-pop-up"><i class="ti-zoom-in"></i></a>
                                    </div>
                                </div>
                                <div class="properties-caption properties-caption2">
                                    <h3><a th:href="@{proDetails(gid=${goods.getGid()})}"
                                           th:text="${goods.getGoodsName()}"></a></h3>
                                    <div class="properties-footer">
                                        <div class="price">
                                            <span th:text="${'￥' + goods.getGoodsPrice()}"></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--结束-->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 轮播推荐图 结束 -->

    <!-- 猜你喜欢 开始 -->
    <section class="latest-items section-padding fix">
        <div class="row">
            <div class="col-xl-12">
                <div class="section-tittle text-center mb-40">
                    <h2>猜你喜欢</h2>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="latest-items-active">
                <!-- 循环开始 -->
                <div class="properties pb-30" th:each="goods:${allGoods}">
                    <div class="properties-card">
                        <div class="properties-img" style="width: 300px;height: 336px;">
                            <a th:href="@{proDetails(gid=${goods.getGid()})}">
                                <img th:src="'http://localhost:8888' + ${goods.getGoodsImg()}">
                            </a>
                            <div class="socal_icon">
                                <a th:href="@{proDetails(gid=${goods.getGid()})}"><i class="ti-shopping-cart"></i></a>
                                <a th:href="'http://localhost:8888' + ${goods.getGoodsImg()}" class="img-pop-up"><i class="ti-zoom-in"></i></a>
                            </div>
                        </div>
                        <div class="properties-caption properties-caption2">
                            <h3><a th:href="@{proDetails(gid=${goods.getGid()})}"
                                   th:text="${goods.getGoodsName()}"></a></h3>
                            <div class="properties-footer">
                                <div class="price">
                                    <span th:text="${'￥' + goods.getGoodsPrice()}"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 循环结束 -->
            </div>
        </div>
    </section>
    <!-- 猜你喜欢 结束 -->

    <!-- 底部图标 -->
    <div class="categories-area">
        <div class="container">
            <div class="row">
                <div class="col-lg-3 col-md-6 col-sm-6">
                    <div class="single-cat mb-50 wow fadeInUp text-center" data-wow-duration="1s" data-wow-delay=".2s">
                        <div class="cat-icon">
                            <img th:src="@{/assets/img/icon/services1.svg}" alt="">
                        </div>
                        <div class="cat-cap">
                            <h5>快速免费送货</h5>
                            <p>所有订单均免费送货</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-sm-6">
                    <div class="single-cat mb-50 wow fadeInUp text-center" data-wow-duration="1s" data-wow-delay=".2s">
                        <div class="cat-icon">
                            <img th:src="@{/assets/img/icon/services2.svg}" alt="">
                        </div>
                        <div class="cat-cap">
                            <h5>安全支付</h5>
                            <p>绝对安全的支付环境</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-sm-6">
                    <div class="single-cat mb-50 wow fadeInUp text-center" data-wow-duration="1s" data-wow-delay=".4s">
                        <div class="cat-icon">
                            <img th:src="@{/assets/img/icon/services3.svg}" alt="">
                        </div>
                        <div class="cat-cap">
                            <h5>退款不保证</h5>
                            <p>一旦支付概不退款</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-sm-6">
                    <div class="single-cat mb-50 wow fadeInUp text-center" data-wow-duration="1s" data-wow-delay=".5s">
                        <div class="cat-icon">
                            <img th:src="@{/assets/img/icon/services4.svg}" alt="">
                        </div>
                        <div class="cat-cap">
                            <h5>24小时不在线客服</h5>
                            <p>随机挑选时间的在线客服</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
<!-- Services Area End -->

<th:block th:insert="~{/fixed/footBar::footBar}"></th:block>

<th:block th:insert="~{/fixed/footer::foot}"></th:block>

</body>
</html>